<!--
 * @Author: liujinjun681 liujinjun681@qq.com
 * @Date: 2022-09-08 16:04:23
 * @LastEditors: liujinjun681 liujinjun681@qq.com
 * @LastEditTime: 2022-11-21 15:52:55
 * @FilePath: \hd_ims_web\src\views\output\outputData\qrCode\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="24"></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>操作台</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="creatQr">生成二维码</el-button> -->
          </div>
          <el-form label-width="120px" :model="form" ref="formQr">
            <el-form-item label="日期" prop="rq" required><el-date-picker v-model="form.rq" value-format="yyyy-MM-dd" /></el-form-item>
            <el-form-item label="班别" prop="rrqBc" required>
              <el-radio-group v-model="form.rrqBc" size="large" style="padding-left: 15px">
                <el-radio label="A班" />
                <el-radio label="B班" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="编码">
              <el-autocomplete
                type="text"
                :fetch-suggestions="getAllCustomer"
                v-model="form.bm1"
                :trigger-on-focus="false"
                value-key="itmCustwldm"
                @select="FillAttribute" />
              <el-autocomplete
                type="text"
                :fetch-suggestions="getAllCustomer"
                v-model="form.bm2"
                :trigger-on-focus="false"
                value-key="itmCustwldm"
                @select="FillAttribute" />

              <!-- <el-autocomplete
                type="text"
                :fetch-suggestions="getAllCustomer"
                v-model="customerCode"
                :trigger-on-focus="false"
                value-key="itmCustwldm"
                @select="FillAttribute" /> -->
            </el-form-item>
            <el-form-item label="名称">
              <el-input size="large" v-model="form.mc"></el-input>
            </el-form-item>

            <el-form-item label="数量" prop="number" required>
              <el-input-number size="large" v-model="form.number" controls-position="right" :precision="0" :min="0" :max="100"></el-input-number>
            </el-form-item>
            <el-form-item label="颜色" prop="color" required>
              <el-input size="large" v-model="form.color"></el-input>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>打印预览</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="printQr">打印</el-button>
          </div>
          <div class="scrollbarQr" id="printContent">
            <div class="divqr">
              <div>
                <table>
                  <tr>
                    <td>名称:</td>
                    <td>{{ form.mc }}</td>
                    <td>日期:</td>
                    <td>{{ form.rq }}</td>
                  </tr>
                  <tr>
                    <td>编码:</td>
                    <td>
                      {{ form.bm1 }}
                      <br />
                      {{ form.bm2 }}
                    </td>
                    <td>班别:</td>
                    <td>{{ form.rrqBc }}</td>
                  </tr>
                  <tr>
                    <td>颜色</td>
                    <td>{{ form.color }}</td>
                    <td>数量:</td>
                    <td>{{ form.number }}</td>
                  </tr>
                  <tr></tr>
                </table>
              </div>
            </div>
            <div class="divqr">
              <div>
                <table>
                  <tr>
                    <td>名称:</td>
                    <td>{{ form.mc }}</td>
                    <td>日期:</td>
                    <td>{{ form.rq }}</td>
                  </tr>
                  <tr>
                    <td>编码:</td>
                    <td>
                      {{ form.bm1 }}
                      <br />
                      {{ form.bm2 }}
                    </td>
                    <td>班别:</td>
                    <td>{{ form.rrqBc }}</td>
                  </tr>
                  <tr>
                    <td>颜色</td>
                    <td>{{ form.color }}</td>
                    <td>数量:</td>
                    <td>{{ form.number }}</td>
                  </tr>
                  <tr></tr>
                </table>
              </div>
              <!-- <div class="divrkz">入库章</div>
              <div class="divzjz">质检章</div> -->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
import printJS from 'print-js'
import { getAll } from '@/api/repertory/Storage'
import { generateProdQr, updatePrintProdQr } from '@/api/repertory/putstorage'
import { listMateriel } from '@/api/project/materiel'
import { automaticStorage, PDACusWldmList, getItmMstrByPDACustwldm, getStatisticsWarehousing } from '@/api/repertory/PDA'
export default {
  name: 'PrintCert',
  components: {
    VueQr,
  },
  data() {
    return {
      form: {
        rq: this.$moment().format('YYYY-MM-DD'),
        number: 26,
        mc: '铰链上下罩',
        color: '布朗灰',
        bm1: '0070211406',
        bm2: '0070211406F',
        carLen: 4,
      },
      date: '',
      BcDm: '白班',
      customerCode: '',
      wldm: '',
      bzsl: '',
      pmgg: '',
      khdm: '',
      rkkh: '',
      rkck: '',
      itmCzdm: '',
      pm: '',
      listQr: [],
      num: null,
      //提供的所有客户代码
      provider_list_data: [],
      //符合条件的客户代码
      provider_list: [],
      //入库仓库
      warehouse_list: [],
      //入库类型
      type_list: [],
      //入库客户
      kh_list: [],
    }
  },
  created() {
    //请求所有客户代码
    PDACusWldmList().then((response) => {
      this.provider_list_data = response.data
    })

    //所有仓库
    getAll().then((response) => {
      this.warehouse_list = response.data
      for (let item of this.warehouse_list) {
        item.itemView = '[' + item.storageCode + ']' + item.storageName
        item.listClass = 'default'
        item.itemCode = item.storageId + ''
      }
    })
  },
  computed: {
    carBh() {
      return `${this.customerCode}#${this.form.carRq}#${this.form.rrqBc}`
    },
  },
  methods: {
    msg(msg, type) {
      this.$message({ showClose: true, message: msg, type: 'success' })
    },
    getBzsl(queryString, cb) {
      cb(
        this.bzsl.split(';').map((a) => {
          return { value: a }
        })
      )
    },
    printQr() {
      updatePrintProdQr({ carBh: this.carBh })
      printJS({
        documentTitle: 'qr-' + this.customerCode,
        printable: 'printContent', // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
        type: 'html', // 可打印的类型。可用的打印选项包括：pdf，html，图像，json和raw-html。
        style: ['@page { margin: 0mm;} body {margin: 0;} h4 {margin:0}'],
        targetStyles: ['*'], // 库在打印HTML元素时处理任何样式
      })
    },
    creatQr() {
      this.$refs['formQr'].validate((valid) => {
        if (valid) {
          if (this.form.number < 1) {
            this.$message.warning('请输入数量！')
            return
          }
          if (this.form.rrqWldm !== null && this.form.rrqWldm !== '') {
            generateProdQr({ ...this.form, carBh: this.carBh }).then((res) => {
              this.listQr = res.data.map((o) => {
                o.text = `${this.pm}/${this.customerCode}/${this.$moment(this.form.carRq).format('YYYYMMDD')}/${this.form.rrqBc.replace('班', '')}${
                  o.carNumber
                }/CDFDE(武汉衡德)`
                return o
              })
              this.$message.success('生成二维码成功！')
            })
          } else {
            this.$message.warning('请确认该客户代码是否存在！')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    clearALL() {
      this.listQr = ''
      this.date = ''
      this.wldm = ''
      this.pmgg = ''
      this.pm = ''
      this.rkkh = ''
      this.rkck = ''
      this.form.rrqWldm = ''
      this.num = null
      // this.handleFocus('start')
    },
    getAllCustomer(queryString, cb) {
      if (!queryString) {
        return
      }
      let temp = []
      this.clearALL()

      temp = this.provider_list_data
        .filter((i) => {
          return i.itmCustwldm.substr(-6).indexOf(queryString) != -1
        })
        .slice(0, 30)
      cb(temp)
    },
    FillAttribute(cusCode) {
      if (!cusCode.itmCustwldm) {
        return
      }

      getItmMstrByPDACustwldm({ itmCustwldm: cusCode.itmCustwldm }).then((res) => {
        if (res.code == '200') {
          this.form.color = res.data.itmYsdm
          this.form.mc = res.data.itmWlpm
          this.form.number = undefined
        } else {
          alert(res.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.ollist {
  list-style-type: none;
  margin: 0px 0px 0px 5px;
  font-size: 12px;
  height: 90px;
  transform-origin: left;
  transform: scale(0.8, 1);
  white-space: nowrap;
  font-weight: 700;
}
.divqr {
  height: 100px;
  width: 255px;
  padding: 5px;
  page-break-inside: avoid;
  position: relative;
  overflow: hidden;
  table {
    width: 245px;
    font-weight: 700;
  }
  > div {
    page-break-inside: avoid;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
  }
  .divrkz {
    margin: 5px 20px;
    height: 50px;
    font-size: 22px;
    width: 200px;
    border: 2px dashed #000000;
  }
  .divzjz {
    position: absolute;
    border-radius: 100%;
    font-size: 22px;
    border: 2px dashed #000000;
    bottom: 15px;
    right: 10px;
    width: 125px;
    height: 125px;
  }
}
.scrollbarQr {
  // height: 500px;
  // overflow-y: auto;
  width: 520px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  ::v-deep .is-horizontal {
    display: none;
  }
}
</style>
